<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form_ajax</title>
    <link rel="stylesheet" type="text/css" href="/easyui.css">
    <link rel="stylesheet" type="text/css" href="/icon.css">
    <link rel="stylesheet" type="text/css" href="/demo.css">
    <script src="/jquery.min.js"></script>
    <script src="/jquery.easyui.min.js"></script>
</head>
<body>
<form id="form">
    <table cellpadding="5">
        <tr>
            <td>productid:</td>
            <td><input class="easyui-textbox" type="text" name="productid" data-options="required:true"></input></td>
        </tr>
        <tr>
            <td>productname:</td>
            <td><input class="easyui-textbox" type="text" name="productname" data-options="required:true,validType:'email'"></input></td>
        </tr>
        <tr>
            <td>unitcost:</td>
            <td><input class="easyui-textbox" type="text" name="unitcost" data-options="required:true"></input></td>
        </tr>
        <tr>
            <td>status</td>
            <td><input class="easyui-textbox" name="status" data-options="multiline:true" style="height:60px"></input></td>
        </tr>
        <tr>
            <td>listprice</td>
            <td><input class="easyui-textbox" name="listprice" data-options="multiline:true" style="height:60px"></input></td>
        </tr>
        <tr>
            <td>attr1</td>
            <td><input class="easyui-textbox" name="attr1" data-options="multiline:true" style="height:60px"></input></td>
        </tr>
        <tr>
            <td>itemid:</td>
            <!--multiline定义是否是多行文本-->
            <td><input class="easyui-textbox" name="itemid" data-options="multiline:true" style="height:60px"></input></td>
        </tr>

        <tr>
            <td>
        <div style="text-align:center;padding:5px">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">Clear</a>
        </div>
            </td>
        </tr>
    </table>

</form>
<script type="text/javascript">
    $("#form").form({});
//   将在服务端的数据加载到form的表单当中
    $("#form").form('load',"/day12/formData");
//

   $("#form").form('submit',{
       url:"/day12/tableDate",
       success:function (data) {
                console.log("提交成功"+data);
       }
   });
    function submitForm(){
        $('#form').form('submit');
    }
    function clearForm(){
        $('#form').form('clear');
    }
</script>
</body>
</html>